<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css样式使用</title>
    <style type="text/css">
     
      html,body{
          padding: 0;
          width: 100% ;
          min-height: 100%; 
          display: flex ;
          flex: 1 ;
          flex-direction:column ;
      }
      #container{
          display: flex ;
          flex-direction: column ;
          flex: 1;
          width: 100% ;
          min-height: 100%;
          padding: 0% ;
          background-color: blue ;

      }
      .title{
          width: 100% ;
          height: 50xp;
          display: flex ;
          flex-direction: row; 
          justify-content: center;
          color: #ffffff ;
      }
      .content{
          display: flex ;
          flex-direction: column ;
          flex: 1;
          background-color: #ff25ff ;
          align-items: center ;
      }
      .footer{
          width: 100%;
          height: 60px;
          display: flex;
          flex-direction: row ;
          align-items: center;
          justify-content: center ;
      }
     /* & 是ｌｅss的语法　表示嵌套的上一级  */
      .test{
          padding: 20px;
          width: 60px;
          height: 50px;
          border: solid 1px;
          outline: #ff2533 dashed 5px;
          transform: translate(-100%, -50%);
      }
    
    </style>
</head>
<body>
    　<div id="container">
         <div class="title">我是title</div>
         <div class="content">

            <div class="test">我是测试</div>
         </div>
         <div class="footer">
             我是footer
         </div>
    </div>
</body>
</html>